<template>
    <div class="productIntroduction">


        <el-upload
                v-loading="listLoading"
                element-loading-text="正在导入..."
                ref="newupload"
                class="upload-demo"
                drag
                action="enjoylove/product/uploadProduct"
                :show-file-list="false"
                :before-upload="beforeUpload"
                :auto-upload="true"
                :on-change="newhandleChange"
                :before-remove="beforeRemove"
                :on-success="newhandlesuccess">
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <!--<div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
        </el-upload>

        <dl>
            <dt>商品导入说明：</dt>
            <dd>1、导入文件为.zip格式的压缩文件，且以字母或数字命名；</dd>
            <dd>2、压缩包内包括excel表及多个以商品条码命名的文件夹，文件夹为多个以数字命名的商品图片（图片格式为.png、.jpg、.gif）；</dd>
            <dd>3、商品图片名，代表图片在应用中的显示顺序，第一张图片默认为商品主图片；</dd>
            <dd>4、具体参考商品导入模板，下载 <a href="/assets/productTemplate.zip" download="productTemplate.zip">模板</a>。</dd>
        </dl>

    </div>
</template>
<script>
  import * as api from '../../../api/enjoylove_api'

  export default {
    data() {
        return {
          listLoading: false
        };
      },
      methods: {
        beforeUpload(file) {
          var fileName=new Array()
          fileName =file.name.split('.');
          const extension = fileName[fileName.length-1] === 'zip'
          const isLt2M = file.size / 1024 / 1024 < 100

          if (!extension) {
            this.$message({
              message: '上传文件只能是.zip格式!',
              type: 'warning'
            });
          }
          if (!isLt2M) {
            this.$message({
              message: '上传文件大小不能超过 100MB!',
              type: 'warning'
            });
          }
          if (extension && isLt2M == true) {
            this.listLoading = true
            let fd = new FormData()
            fd.append('file', file)
            return true
          }
          return extension && isLt2M
        },
        newhandleChange () {

        },
        newhandlesuccess (response, file, fileList) {
          this.listLoading = false
          let res = JSON.parse(response)
          console.log(res);
          if (res.success) {
            this.$notify({
              title: '导入商品成功',
              message: '',
              duration: 120000
            });

          }else {
            console.log(res.message)
            console.log(res.data)
            if (res.data) {
              this.$notify({
                title: '导入商品失败',
                message: res.data.errors,
                duration: 120000
              });
            }else {
              this.$notify({
                title: '导入商品失败',
                message: res.message,
                duration: 120000
              });
            }
          }

        },
        beforeRemove () {
          return false
        }


      }
    }
</script>